<template>
  <div class="timezone-add-warp common-warp wh100 warp-bg">
    <div class="name">
      <a-input v-model:value="state.form.name" placeholder="请输入时段名称" />
    </div>
    <div class="noo">

      <div class="add-item">
        <div class="item-title">星期一</div>
        <div class="cell-warp">
          <div class="item-cell">
            <div class="cell-label">时段一</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v1AStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v1AEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段二</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v1BStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v1BEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段三</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v1CStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v1CEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段四</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v1DStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v1DEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
        </div>
      </div>

      <div class="add-item">
        <div class="item-title">星期二</div>
        <div class="cell-warp">
          <div class="item-cell">
            <div class="cell-label">时段一</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v2AStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v2AEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段二</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v2BStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v2BEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段三</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v2CStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v2CEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段四</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v2DStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v2DEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
        </div>
      </div>

      <div class="add-item">
        <div class="item-title">星期三</div>
        <div class="cell-warp">
          <div class="item-cell">
            <div class="cell-label">时段一</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v3AStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v3AEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段二</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v3BStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v3BEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段三</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v3CStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v3CEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段四</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v3DStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v3DEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
        </div>
      </div>

      <div class="add-item">
        <div class="item-title">星期四</div>
        <div class="cell-warp">
          <div class="item-cell">
            <div class="cell-label">时段一</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v4AStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v4AEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段二</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v4BStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v4BEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段三</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v4CStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v4CEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段四</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v4DStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v4DEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
        </div>
      </div>

      <div class="add-item">
        <div class="item-title">星期五</div>
        <div class="cell-warp">
          <div class="item-cell">
            <div class="cell-label">时段一</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v5AStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v5AEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段二</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v5BStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v5BEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段三</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v5CStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v5CEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段四</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v5DStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v5DEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
        </div>
      </div>

      <div class="add-item">
        <div class="item-title">星期六</div>
        <div class="cell-warp">
          <div class="item-cell">
            <div class="cell-label">时段一</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v6AStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v6AEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段二</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v6BStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v6BEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段三</div>
            <div class="cell-content">

              <a-time-picker v-model:value="state.form.v6CStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v6CEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段四</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v6DStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v6DEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
        </div>
      </div>

      <div class="add-item">
        <div class="item-title">星期日</div>
        <div class="cell-warp">
          <div class="item-cell">
            <div class="cell-label">时段一</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v0AStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v0AEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段二</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v0BStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v0BEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段三</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v0CStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v0CEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
          <div class="item-cell">
            <div class="cell-label">时段四</div>
            <div class="cell-content">
              <a-time-picker v-model:value="state.form.v0DStartTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
              <a-time-picker v-model:value="state.form.v0DEndTime" valueFormat="HH:mm:ss"><template
                  #suffixIcon></template></a-time-picker>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-button type="primary" block @click="confirm">提交</a-button>
  </div>
</template>

<script lang='ts' setup>
import { useAccessTimezoneQueryApi, useAccessTimezoneUpdateApi } from '@/api';
import { message } from 'ant-design-vue';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const useContent = () => {
  return {
    code: "",
    name: "",
    v0AEndTime: "",
    v0AStartTime: "",
    v0BEndTime: "",
    v0BStartTime: "",
    v0CEndTime: "",
    v0CStartTime: "",
    v0DEndTime: "",
    v0DStartTime: "",
    v1AEndTime: "",
    v1AStartTime: "",
    v1BEndTime: "",
    v1BStartTime: "",
    v1CEndTime: "",
    v1CStartTime: "",
    v1DEndTime: "",
    v1DStartTime: "",
    v2AEndTime: "",
    v2AStartTime: "",
    v2BEndTime: "",
    v2BStartTime: "",
    v2CEndTime: "",
    v2CStartTime: "",
    v2DEndTime: "",
    v2DStartTime: "",
    v3AEndTime: "",
    v3AStartTime: "",
    v3BEndTime: "",
    v3BStartTime: "",
    v3CEndTime: "",
    v3CStartTime: "",
    v3DEndTime: "",
    v3DStartTime: "",
    v4AEndTime: "",
    v4AStartTime: "",
    v4BEndTime: "",
    v4BStartTime: "",
    v4CEndTime: "",
    v4CStartTime: "",
    v4DEndTime: "",
    v4DStartTime: "",
    v5AEndTime: "",
    v5AStartTime: "",
    v5BEndTime: "",
    v5BStartTime: "",
    v5CEndTime: "",
    v5CStartTime: "",
    v5DEndTime: "",
    v5DStartTime: "",
    v6AEndTime: "",
    v6AStartTime: "",
    v6BEndTime: "",
    v6BStartTime: "",
    v6CEndTime: "",
    v6CStartTime: "",
    v6DEndTime: "",
    v6DStartTime: "",
  }
}
const state = reactive({
  form: useContent()
})

const confirm = async () => {
  console.log(state.form)
  if (!state.form.name) {
    message.error('请输入时段名称')
    return
  }
  await useAccessTimezoneUpdateApi(state.form)
  message.success("操作成功", 2);
  setTimeout(() => {
    router.push({ name: 'AccessTimezone' })
  }, 2300)
}

//根据路由参数搜索
const queryData = async (devcode: string) => {
  let { data: { code,
    name,
    v0AEndTime,
    v0AStartTime,
    v0BEndTime,
    v0BStartTime,
    v0CEndTime,
    v0CStartTime,
    v0DEndTime,
    v0DStartTime,
    v1AEndTime,
    v1AStartTime,
    v1BEndTime,
    v1BStartTime,
    v1CEndTime,
    v1CStartTime,
    v1DEndTime,
    v1DStartTime,
    v2AEndTime,
    v2AStartTime,
    v2BEndTime,
    v2BStartTime,
    v2CEndTime,
    v2CStartTime,
    v2DEndTime,
    v2DStartTime,
    v3AEndTime,
    v3AStartTime,
    v3BEndTime,
    v3BStartTime,
    v3CEndTime,
    v3CStartTime,
    v3DEndTime,
    v3DStartTime,
    v4AEndTime,
    v4AStartTime,
    v4BEndTime,
    v4BStartTime,
    v4CEndTime,
    v4CStartTime,
    v4DEndTime,
    v4DStartTime,
    v5AEndTime,
    v5AStartTime,
    v5BEndTime,
    v5BStartTime,
    v5CEndTime,
    v5CStartTime,
    v5DEndTime,
    v5DStartTime,
    v6AEndTime,
    v6AStartTime,
    v6BEndTime,
    v6BStartTime,
    v6CEndTime,
    v6CStartTime,
    v6DEndTime,
    v6DStartTime, } } = await useAccessTimezoneQueryApi({ code: devcode })
  state.form = {
    code,
    name,
    v0AEndTime,
    v0AStartTime,
    v0BEndTime,
    v0BStartTime,
    v0CEndTime,
    v0CStartTime,
    v0DEndTime,
    v0DStartTime,
    v1AEndTime,
    v1AStartTime,
    v1BEndTime,
    v1BStartTime,
    v1CEndTime,
    v1CStartTime,
    v1DEndTime,
    v1DStartTime,
    v2AEndTime,
    v2AStartTime,
    v2BEndTime,
    v2BStartTime,
    v2CEndTime,
    v2CStartTime,
    v2DEndTime,
    v2DStartTime,
    v3AEndTime,
    v3AStartTime,
    v3BEndTime,
    v3BStartTime,
    v3CEndTime,
    v3CStartTime,
    v3DEndTime,
    v3DStartTime,
    v4AEndTime,
    v4AStartTime,
    v4BEndTime,
    v4BStartTime,
    v4CEndTime,
    v4CStartTime,
    v4DEndTime,
    v4DStartTime,
    v5AEndTime,
    v5AStartTime,
    v5BEndTime,
    v5BStartTime,
    v5CEndTime,
    v5CStartTime,
    v5DEndTime,
    v5DStartTime,
    v6AEndTime,
    v6AStartTime,
    v6BEndTime,
    v6BStartTime,
    v6CEndTime,
    v6CStartTime,
    v6DEndTime,
    v6DStartTime,
  }
}

onMounted(() => {
  let ainput = document.querySelectorAll('.timezone-add-warp .ant-picker-input input')
  ainput.forEach((item: any) => {
    item.addEventListener('focus', () => {
      item.setAttribute('readonly', 'false')
    })
  })
  document.title = '编辑'
  let { code }: any = route.query
  queryData(code)
})
</script>
<style scoped lang='less'>
.timezone-add-warp {

  .add-item {
    margin-top: 60px;

    .item-title {
      color: #444;
      margin: 12px 0;
    }

    .cell-warp {
      padding: 32px;
      background-color: #fff;
      border-radius: 4px;

      .item-cell {
        display: flex;
        margin-bottom: 64px;

        &:nth-last-child(1) {
          margin-bottom: 0;
        }

        .cell-label {
          color: #444;
          display: flex;
          align-items: center;
          width: 150px;
        }

        .cell-content {
          color: #000;
          flex: 1;
          display: flex;
          justify-content: space-around;

          :deep(.ant-picker) {
            padding: 4px 6px 4px !important;
          }
        }
      }
    }
  }

  .noo {
    height: calc(100vh - 100px);
    overflow-y: scroll;
  }
}
</style>